<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="hcp">
    {{title}}<br/>
    <button @click="changeTitle">修改标题</button>
    <br>
    <button @click="destroy">手动销毁组件</button>
    <br>
    <h3>{{ hh() }}</h3>
</div>

<script>
    new Vue({
        el: "#hcp",
        data: {
            title: '原先的标题'
        },
        methods: {
            changeTitle: function () {
                this.title = "新的标题";
            },
            destroy:function (){
                // vue内置的销毁组件的方法
                this.$destroy();
            },
            hh: function () {
                return "hello";
            }
        },
        // 演示生命周期函数
        // 1、组件创建之前
        beforeCreate: function () {
            console.log("beforeCreate");
        },
        // 2、组件创建结束
        created: function () {
            console.log("created");
        },
        // 3、组件挂载之前[组件绑定到了DOM树上]
        beforeMount: function () {
            console.log("beforeMount");
        },
        // 4、组件挂载结束
        mounted: function () {
            console.log("mounted");
        },
        // 5、组件更新之前
        beforeUpdate: function () {
            console.log("beforeUpdate");
        },
        // 6、组件更新完成
        updated: function () {
            console.log("updated");
        },
        // 7、组件销毁之前
        beforeDestroy: function () {
            console.log("beforeDestroy");
        },
        // 8、组件销毁之后
        destroyed: function () {
            console.log("destroy");
        }
    });
</script>
</body>
</html>